<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input clearable style="width: 150px;" class="filter-item" placeholder="卡号" v-model="listQuery.cardNo" clearable>
      </el-input>
      <el-input clearable style="width: 150px;" class="filter-item" placeholder="标题" v-model="listQuery.title" clearable>
      </el-input>
      <el-select clearable v-model="listQuery.unitId" placeholder="请选择社区">
        <el-option v-for="(item, index) in community" :key="item.uuid" :label="item.name" :value="item.uuid"></el-option>
      </el-select>
      <el-select clearable v-model="listQuery.typeCode" placeholder="请选择" style="width: 175px;">
        <el-option v-for="item in typedata" :key="item.key" :label="item.display_name" :value="item.key"></el-option>
      </el-select>
      <el-select clearable v-model="listQuery.stateCode" placeholder="请选择" style="width: 175px;">
        <el-option label="待确认" value="0"></el-option>
        <el-option label="待回收" value="1"></el-option>
        <el-option label="已拒绝" value="2"></el-option>
        <el-option label="已取消" value="3"></el-option>
        <el-option label="已完成" value="4"></el-option>
      </el-select>
      <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label='用户卡号' width="100">
        <template slot-scope="scope">
          {{scope.row.cardNo}}
        </template>
      </el-table-column>
      <el-table-column label="联系人" align="center" width="110">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center" width="100">
        <template slot-scope="scope">
          {{scope.row.phone}}
        </template>
      </el-table-column>
      <el-table-column label="标题" align="center">
        <template slot-scope="scope">
          {{scope.row.title}}
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.typeName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="小区" align="center" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.unitName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址" align="center" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.address}}</span>
        </template>
      </el-table-column>
      <el-table-column label="接单人员" align="center" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.adminName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="预约时间" align="center" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.time}}</span>
        </template>
      </el-table-column>
      <el-table-column label="接单时间" align="center" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.acceptTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="完成时间" align="center" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.completeTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.stateName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="detail(scope.row,scope.$index)" plain>
            查看
          </el-button>
          <el-button v-if="scope.row.stateCode === 0" size="mini" @click="bianji(scope.row,scope.$index)" plain>
            编辑
          </el-button>
          <el-button v-if="scope.row.stateCode === 1" type="primary" size="mini" @click="bianji(scope.row,scope.$index)" plain>
            完成
          </el-button>
          <el-button v-if="scope.row.stateCode === 2" type="danger" disabled size="mini" plain>
            已拒绝
          </el-button>
          <el-button v-if="scope.row.stateCode === 3" type="info" disabled size="mini" plain>
            已取消
          </el-button>
          <el-button v-if="scope.row.stateCode === 4" type="success" disabled size="mini" plain>
            已完成
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.page" :page-sizes="[10,20,30,50]"
                     :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!--分页END-->

    <!--编辑表单弹窗-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :rules="formsrules" ref="dataForm" :model="temp" label-position="right" label-width="120px" style='width: 470px; margin-left:50px;'>
        <el-form-item label="卡号：">
          <el-input type="text" v-model="temp.cardNo" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="typestatus === 0" label="状态修改：" prop="stateCode">
          <el-select v-model.number="temp.stateCode" placeholder="请选择" style="width: 175px;">
            <el-option label="待确认" :value = 0></el-option>
            <el-option label="待回收" :value="1"></el-option>
            <el-option label="拒绝" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="typestatus === 1" label="状态修改：" prop="stateCode">
          <el-select v-model="temp.stateCode" placeholder="请选择" style="width: 175px;">
            <el-option label="待回收" :value="1"></el-option>
            <el-option label="完成" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="temp.stateCode === 2" label="原因：">
          <el-input type="textarea"
                    :autosize="{ minRows: 3, maxRows: 4}"
                    v-model="temp.reason"
                    placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item v-if="temp.stateCode === 4" label="兑换类型：">
          <el-select v-model="temp.exchangeType" placeholder="请选择" style="width: 175px;">
            <el-option label="积分" :value="0"></el-option>
            <el-option label="现金" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="temp.stateCode === 4" label="金额：">
          <el-input type="text" v-model="temp.price"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="addrole">确 定</el-button>
        <el-button v-else type="primary" @click="sureEdit">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑表单弹窗END-->

    <!--详情弹窗-->
    <el-dialog title="详情" :visible.sync="dialogDetailVisible">
      <table>
        <tr>
          <th class="table_leftNmae">卡号：</th>
          <td class="table_content">{{ temp.cardNo }}</td>
        </tr>
        <tr>
          <th class="table_leftNmae">状态：</th>
          <td class="table_content">{{ temp.stateName }}</td>
        </tr>
        <tr v-if="temp.stateCode === 2">
          <th class="table_leftNmae">拒绝原因：</th>
          <td class="table_content">{{ temp.reason }}</td>
        </tr>
        <tr v-if="temp.stateCode === 4">
          <th class="table_leftNmae">兑换类型：</th>
          <td class="table_content">
            <span v-if="temp.exchangeType === 0">积分</span>
            <span v-if="temp.exchangeType === 1">现金</span>
          </td>
        </tr>
        <tr v-if="temp.stateCode === 4">
          <th class="table_leftNmae">金额：</th>
          <td class="table_content">{{temp.price}}</td>
        </tr>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetailVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!--编辑表单弹窗END-->
  </div>
</template>

<script>
  import { getList, sureEdit } from '@/api/appointment/appointmentList'
  import { getcommunity } from '@/api/public'
  import { mapGetters } from 'vuex'

  const typedata = [
    { key: '0', display_name: '金属' },
    { key: '1', display_name: '塑料' },
    { key: '2', display_name: '废纸' },
    { key: '3', display_name: '玻璃' },
    { key: '4', display_name: '旧衣物' },
    { key: '5', display_name: '家电' },
    { key: '6', display_name: '大件垃圾' },
    { key: '7', display_name: '有害' }
  ]

  export default {
    data() {
      return {
        list: null,
        listLoading: true,
        total: null,
        listQuery: {
          id: undefined,
          cardNo: '',
          title: '',
          unitId: '',
          typeCode: '',
          stateCode: ''
        },
        temp: {
          id: undefined,
          stateCode: 0,
          exchangeType: ''
        },
        typestatus: '',
        dialogStatus: '',
        typedata,
        community: [],
        textMap: {
          update: '编辑',
          create: '创建'
        },
        value: true,
        dialogFormVisible: false,
        dialogDetailVisible: false,
        formsrules: {
          stateCode: [{ required: true, message: '请选择社区', trigger: 'change' }]
        }
      }
    },
    computed: {
      ...mapGetters([
        'token'
      ])
    },
    created() {
      this.fetchData()
      this.getcommunity()
    },
    methods: {
      // 获取列表
      fetchData() {
        this.listLoading = true
        getList(this.listQuery).then(response => {
          this.list = response.data.content
          this.total = response.data.totalElements
          this.listQuery.size = response.data.size
          this.listLoading = false
        })
      },
      getcommunity() {
        getcommunity().then(response => {
          this.community = response.data.content
        })
      },
      handleFilter() {
        this.fetchData()
      },
      bianji(row) {
        this.temp = Object.assign({}, row)
        this.typestatus = this.temp.stateCode
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      sureEdit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.temp.token = this.token
            const temData = Object.assign({}, this.temp)
            sureEdit(temData).then(response => {
              for (const v of this.list) {
                if (v.id === this.temp.id) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, response.data)
                  break
                }
              }
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            })
          } else {
            return false
          }
        })
      },
      detail(row) {
        this.temp = Object.assign({}, row)
        this.dialogDetailVisible = true
      },
      handleSizeChange(val) {
        this.listQuery.size = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.fetchData()
      },
      handleDownload() {
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .filter-container{
    padding-bottom: 10px;
  }
  .area-select .el-select{
    margin-left: 0;
  }
  .table_content{
    padding-left: 20px;
  }
  .table_leftNmae{
    width:100px;
    text-align: right
  }
</style>
